.editor {
    width: 100%;
    height: 300px;
    min-height: 300px;
    max-height: 100%;
    box-shadow: inset -10px 0 0 0 var(--gray100);
    position: relative;
    overflow: hidden;
    padding-right: 10px;
    max-width: 100%;

    &:after {
        content: '';
        display: block;
        bottom: 0;
        right: 0;
        position: absolute;
        width: 0;
        height: 0;
        border-bottom: 10px solid var(--gray400);
        border-left: 10px solid transparent;
    }

    @media (prefers-color-scheme: dark) {
        box-shadow: inset -10px 0 0 0 var(--grayDark);
    }

    @media (max-width: 1024px) {
        width: 100% !important;
        resize: none;
    }

    @media (min-width: 1024px) {
        padding-left: 16px;
        min-width: 624px;
        max-width: 100vw;
        resize: both;
    }

    &--full-screen {
        width: 100%!important;
        height: calc(100vh - 112px)!important;

        &:after {
            display: none;
        }

        @media (min-width: 1024px) {
            padding-left: 0;
            resize: none;
        }
    }

    & .ace_editor {
        width: 100%;
        height: 100%;
        border-top: 1px solid var(--gray05);
        border-bottom: 1px solid var(--gray05);

        @media (prefers-color-scheme: dark) {
            border-top: 1px solid var(--gray900);
            border-bottom: 1px solid var(--gray900);
        }
    }

    & .ace_gutter {
        @media (prefers-color-scheme: dark) {
            background: var(--gray900);
        }
    }

    & .ace_gutter-active-line {
        @media (prefers-color-scheme: dark) {
            color: var(--gray300);
            background: var(--grayDark);
        }
    }

    & .ace_gutter-cell {
        @media (prefers-color-scheme: dark) {
            color: var(--gray300);
        }
    }

    & .ace_comment {
        color: var(--green-editor);
    }

    & .ace_constant {
        color: var(--purple-editor);

        @media (prefers-color-scheme: dark) {
            color: var(--pink-editor);
        }
    }

    & .ace_keyword {
        color: var(--red-editor);

        @media (prefers-color-scheme: dark) {
            color: var(--orange-editor);
        }
    }

    & .ace_control {
        color: var(--blue-editor);

        @media (prefers-color-scheme: dark) {
            color: var(--cyan-editor);
        }
    }

    & .ace_operator {
        color: var(--blue-editor)!important;

        @media (prefers-color-scheme: dark) {
            color: var(--cyan-editor)!important;
        }
    }

    & .ace_quoted {
        color: var(--red-editor);

        @media (prefers-color-scheme: dark) {
            color: var(--orange-editor);
        }
    }

    & .ace_string {
        color: var(--red-editor);

        @media (prefers-color-scheme: dark) {
            color: var(--orange-editor);
        }
    }

    & .ace_variable {
        color: var(--red-editor);

        @media (prefers-color-scheme: dark) {
            color: var(--orange-editor);
        }
    }

    & .ace_support.ace_type {
        color: var(--red-editor)!important;

        @media (prefers-color-scheme: dark) {
            color: var(--orange-editor)!important;
        }
    }

    & .ace_support.ace_constant {
        color: var(--red-editor)!important;

        @media (prefers-color-scheme: dark) {
            color: var(--orange-editor)!important;
        }
    }

    & .ace_support.ace_function {
        color: var(--red-editor)!important;

        @media (prefers-color-scheme: dark) {
            color: var(--orange-editor)!important;
        }
    }

    & .ace_name.ace_function {
        color: var(--brown-editor)!important;

        @media (prefers-color-scheme: dark) {
            color: var(--yellow-editor)!important;
        }
    }

    & .ace_constant.ace_numeric {
        color: var(--red-editor)!important;

        @media (prefers-color-scheme: dark) {
            color: var(--orange-editor)!important;
        }
    }

    & .ace_storage.ace_type {
        color: var(--blue-editor)!important;

        @media (prefers-color-scheme: dark) {
            color: var(--cyan-editor)!important;
        }
    }

    & .ace-tm {
        background-color: transparent!important;

        & .ace_active-line {
            background-color: var(--gray100)!important;

            @media (prefers-color-scheme: dark) {
                background-color: var(--gray900)!important;
            }
        }

        & .ace_selection {
            background-color: var(--gray300)!important;

            @media (prefers-color-scheme: dark) {
                background-color: var(--blueDark-editor)!important;
            }
        }

        & .ace_selected-word {
            background: none!important;
        }
    }
}

.light-mode {
    .editor {
        box-shadow: inset -10px 0 0 0 var(--gray100);

        & .ace_editor {
            border-top: 1px solid var(--gray05);
            border-bottom: 1px solid var(--gray05);
        }

        & .ace_gutter {
            background: #f0f0f0;
        }

        & .ace_gutter-active-line {
            color: var(--gray-base);
            background: #dcdcdc;
        }

        & .ace_gutter-cell {
            color: var(--gray-base);
        }

        & .ace_constant {
            color: var(--purple-editor);
        }

        & .ace_keyword {
            color: var(--red-editor);
        }

        & .ace_control {
            color: var(--blue-editor);
        }

        & .ace_operator {
            color: var(--blue-editor)!important;
        }

        & .ace_quoted {
            color: var(--red-editor);
        }

        & .ace_string {
            color: var(--red-editor);
        }

        & .ace_variable {
            color: var(--red-editor);
        }

        & .ace_support.ace_type {
            color: var(--red-editor)!important;
        }

        & .ace_support.ace_constant {
            color: var(--red-editor)!important;
        }

        & .ace_support.ace_function {
            color: var(--red-editor)!important;
        }

        & .ace_name.ace_function {
            color: var(--brown-editor)!important;
        }

        & .ace_constant.ace_numeric {
            color: var(--red-editor)!important;
        }

        & .ace_storage.ace_type {
            color: var(--blue-editor)!important;
        }

        & .ace-tm {
            & .ace_active-line {
                background-color: var(--gray100)!important;
            }

            & .ace_selection {
                background-color: var(--gray300)!important;
            }
        }
    }
}

.dark-mode {
    .editor {
        box-shadow: inset -10px 0 0 0 var(--grayDark);

        & .ace_editor {
            border-top: 1px solid var(--gray900);
            border-bottom: 1px solid var(--gray900);
        }

        & .ace_gutter {
            background: var(--gray900);
        }

        & .ace_gutter-active-line {
            color: var(--gray300);
            background: var(--grayDark);
        }

        & .ace_gutter-cell {
            color: var(--gray300);
        }

        & .ace_constant {
            color: var(--pink-editor);
        }

        & .ace_keyword {
            color: var(--orange-editor);
        }

        & .ace_control {
            color: var(--cyan-editor);
        }

        & .ace_operator {
            color: var(--cyan-editor)!important;
        }

        & .ace_quoted {
            color: var(--orange-editor);
        }

        & .ace_string {
            color: var(--orange-editor);
        }

        & .ace_variable {
            color: var(--orange-editor);
        }

        & .ace_support.ace_type {
            color: var(--orange-editor)!important;
        }

        & .ace_support.ace_constant {
            color: var(--orange-editor)!important;
        }

        & .ace_support.ace_function {
            color: var(--orange-editor)!important;
        }

        & .ace_name.ace_function {
            color: var(--yellow-editor)!important;
        }

        & .ace_constant.ace_numeric {
            color: var(--orange-editor)!important;
        }

        & .ace_storage.ace_type {
            color: var(--cyan-editor)!important;
        }

        & .ace-tm {
            & .ace_active-line {
                background-color: var(--gray900)!important;
            }

            & .ace_selection {
                background-color: var(--blueDark-editor)!important;
            }
        }
    }
}
